<template>
  <div class="film">

    <div class="film-header">
      <div class="blur-filter"></div>
      <img class="background-img" alt="" :src="film.cover">
    </div>

    <div class="film-card">
      <img class="main-img" alt="" style="width: 100%;height: 100%" :src="film.cover">
    </div>

    <div class="film-des">
      <div class="p1">{{ film.name }}
        <el-rate style="float: right;padding-left: 50px"
                 v-model="value"
                 disabled
                 show-score
                 text-color="#ff9900"
                 score-template="{value}">
        </el-rate>
      </div>
      <div class="p2">电影类型 : {{ film.type }}</div>
      <div class="p2">{{ film.region }} / {{ film.duration }}分钟</div>
      <div class="p2">导演 : {{ film.director }}</div>
      <div class="p2">演员 : {{ film.actors }}</div>
      <div class="index-button-panel" style="padding-top: 30px">
        <el-button class="index-button" style="width: 130px;letter-spacing: 2px" @click="viewAt">
          <i style="padding-right: 5px;font-size: 15px" class="el-icon-caret-right"></i>播放
        </el-button>
        <el-button class="index-button" @click="openComment"
                   style="width: 130px;letter-spacing: 2px; margin-left: 20px">
          <i style="padding-right: 5px;font-size: 15px" class="el-icon-star-on"></i>评分
        </el-button>
      </div>
    </div>

    <div class="film-content">
      <router-view/>
    </div>

    <el-dialog
        :show-close=false
        title="电影评分"
        :visible.sync="dialogVisible"
        width="30%">
      <div class="block">
        <el-rate
            v-model="form.star"
            :colors="colors">
        </el-rate>
      </div>
      <el-input
          style="margin-top: 40px"
          type="textarea"
          :rows="8"
          placeholder="请输入内容"
          v-model="form.comment">
      </el-input>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitComment">确 认 提 交</el-button>
             </span>
    </el-dialog>

  </div>
</template>

<script>
import {AddFilmEvaluate, FindFilmById, ViewAtAdd} from "@/api/film";
import {checkFilmVipStatus, checkVipStatus} from "@/api/vip";

export default {
  name: "Film",
  filmId: Number,
  data() {
    return {
      value2: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      filmId: this.$route.query.fid,
      value: 3.5,
      list: [{}, {}, {}],
      dialogVisible: false,
      film: {},
      evaluateList: [],
      form: {
        fid: '',
        uid: '',
        star: 5,
        comment: '',
      },
    }
  },

  methods: {

    openComment() {
      if (!localStorage.getItem("uid") || localStorage.getItem("uid") === '891b3089-cbf0-4066-9469-9de566a52d10') {
        this.$confirm('系统还没有检测到您的登陆信息, 是否去登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push("/login")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消为电影评分'
          });
        });
      } else {
        this.dialogVisible = true
      }
    },

    viewAt() {
      ViewAtAdd(this.filmId)
      checkVipStatus().then(response => {
        if (response.data) {
          // 如果用户是VIP，跳转到电影播放页面
          this.$router.push({path: '/movie', query: {fid: this.filmId}});
        } else {
          // 如果用户不是VIP，检查电影是否为VIP电影
          this.checkFilmVip();
        }
      }).catch(error => {
        console.error('请求错误:', error);
      });
    },

    checkFilmVip() {
      checkFilmVipStatus(this.filmId).then(response => {
        if (response.data) {
          // 如果电影是VIP电影，显示充值VIP的弹窗
          this.$alert('这部电影需要VIP才能观看噢<br>请点击右上角VIP按钮开启影视之旅吧！', '尊敬的客人', {
            confirmButtonText: '确定',
            dangerouslyUseHTMLString: true,
            callback: action => {
              // 用户点击确定按钮后的回调
              if (action === 'confirm') {
                // 返回到刚才的页面，通常是使用浏览器的后退功能
                this.$router.go(-1);
              }
            }
          });
        } else {
          // 如果电影不是VIP电影，跳转到电影播放页面
          this.$router.push({path: '/movie', query: {fid: this.filmId}});
        }
      }).catch(error => {
        console.error('请求错误:', error);
      });
    },

    submitComment() {
      this.form.fid = this.filmId;
      this.form.uid = localStorage.getItem("uid");
      const form = this.form
      AddFilmEvaluate(form).then(res => {
        this.dialogVisible = false;
      })
    },

  },

  mounted() {
    FindFilmById(this.filmId).then(res => {
      this.film = res.data;
      this.value = this.film.star;
      this.value = parseFloat(this.value)
      if (this.film.actors === '') {
        this.film.actors = '无'
      }
    })
  }


}
</script>

<style scoped>

.film {

}

.film-header {
  position: relative;
  width: 100%;
  height: 380px;
  background-color: #FF3CAC;
  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
  margin-top: 12px;
  overflow: hidden;
}

.blur-filter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 380px;

  z-index: 2;
  backdrop-filter: blur(7px) brightness(90%);
}

.background-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  backdrop-filter: blur(6px) brightness(90%);
}

.film-content {
  padding: 80px 200px;
  letter-spacing: 2px;
}

.p1 {
  font-weight: bolder;
  letter-spacing: 3px;
  color: #FFFFFF;
  font-size: 30px;
  padding-top: 20px;
  padding-bottom: 0px;
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
}

.p2 {
  font-size: 14px;
  padding-top: 20px;
  letter-spacing: 2px;
  color: #FFFFFF;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
}

.film-card {
  width: 240px;
  height: 330px;
  background: #FFFFFF;
  margin-right: 100px;
  margin-left: 190px;
  position: absolute;
  overflow: hidden;
  top: 160px;
  z-index: 999;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.film-des {
  margin-left: 500px;
  position: absolute;
  overflow: hidden;
  top: 150px;
  z-index: 999;
  text-shadow: 1px 2px 3px rgba(41, 21, 81, 0.8);
}

>>> .el-rate__icon {
  font-size: 20px;
}

>>> .el-rate__text {
  padding-left: 8px;
  font-size: 25px;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
}

.el-button {
  background-color: #7b8cf6;
  border: none;
  color: #f0f0f0;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
}

.index-button {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px !important;

}

.index-button-panel {
  margin-top: -10px;
}

::v-deep .el-dialog {
  background: #39354f;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
}

::v-deep .el-dialog__title {
  color: #f0f0f0;
}

::v-deep .el-textarea__inner {
  background-color: #494560;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
  color: #f0f0f0;
  border: none;
}
</style>
